<template>
  <div>
    <userTitel :title="title"> </userTitel>
    <!-- 卡片 -->
    <el-card shadow="never">
      <el-tabs v-model="activeName" @tab-click="Driving">
        <el-tab-pane label="基本信息" name="first">
          <el-form :inline="true">
            <el-form-item label="车辆编号 : ">
              <span
                style="
                  margin-left: 30px;
                  margin-right: 40px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ JSON.parse(this.$route.query.row).id }}</span
              >
            </el-form-item>
            <el-form-item label="车牌号码 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ JSON.parse(this.$route.query.row).licensePlate }}</span
              >
            </el-form-item>
            <el-form-item label="车型名称 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ JSON.parse(this.$route.query.row).truckTypeName }}</span
              >
            </el-form-item>
            <el-form-item style="margin-left: 60px" label="车辆体积 : ">
              <span
                style="
                  margin-left: 30px;
                  margin-right: 64px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{
                  JSON.parse(this.$route.query.row).allowableVolume
                }}
                m³</span
              >
            </el-form-item>
            <el-form-item label="车辆载重 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ JSON.parse(this.$route.query.row).allowableLoad }} 吨</span
              >
            </el-form-item>
            <el-form-item label="GPSID : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ JSON.parse(this.$route.query.row).deviceGpsId }}</span
              >
            </el-form-item>
            <el-form-item style="margin-left: 55px" label="图片信息">
              <img
                style="width: 210px"
                :src="JSON.parse(this.$route.query.row).picture"
                alt=""
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="行驶证信息" name="second">
          <el-form :inline="true">
            <el-form-item label="行驶证号码 : ">
              <span
                style="
                  margin-left: 30px;
                  margin-right: 40px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.transportCertificateNumber }}</span
              >
            </el-form-item>
            <el-form-item label="发动机号码 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.engineNumber }}</span
              >
            </el-form-item>
            <el-form-item label="注册时间 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.expirationDate }}</span
              >
            </el-form-item>
            <el-form-item style="margin-left: 60px" label="强制报废日期 : ">
              <span
                style="
                  margin-left: 30px;
                  margin-right: 67px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.mandatoryScrap }}</span
              >
            </el-form-item>
            <el-form-item label="整备质量 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.overallQuality }} 吨</span
              >
            </el-form-item>
            <el-form-item label="检验有效期 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.registrationDate }}</span
              >
            </el-form-item>
            <el-form-item style="margin-left: 50px" label="核定载质量 : ">
              <span
                style="
                  margin-left: 26px;
                  margin-right: 92px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.allowableWeight }} 吨</span
              >
            </el-form-item>
            <el-form-item label="有效期 : ">
              <span
                style="
                  margin-left: 20px;
                  margin-right: 20px;
                  display: block;
                  margin-top: 2px;
                  height: 20px;
                  width: 300px;
                "
                >{{ formDate.validityPeriod }}</span
              > </el-form-item
            ><br />
            <el-form-item style="margin-left: 55px" label="图片信息">
              <img
                v-for="(item, index) in urlList"
                :key="index"
                style="width: 210px"
                :src="item"
                alt=""
              />
              <!-- <img
                style="width: 210px; margin-left: 20px"
                src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/871adf8e-5830-429a-afaf-16b2dc999553.jpg"
                alt=""
              /> -->
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-row
        style="border-top: 1px solid #e4e7ed"
        type="flex"
        justify="center"
      >
        <el-button
          style="
            width: 110px;
            height: 40px;
            padding-left: 40px;
            margin-top: 20px;
          "
          type="primary"
          >编辑</el-button
        >
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getDriving } from "@/api/vehicle";
export default {
  name: "vehicle-detail",
  data() {
    return {
      title: "车辆详情",
      activeName: "first",
      formDate: {},
      urlList: [],
    };
  },

  created() {
    console.log(JSON.parse(this.$route.query.row));
  },

  methods: {
    async Driving(tab) {
      console.log(tab.index);
      if (tab.index === "1") {
        console.log(JSON.parse(this.$route.query.row).id);
        // if (JSON.parse(this.$route.query.row).id !== null) {
        const res = await getDriving(JSON.parse(this.$route.query.row).id);
        console.log(res.data.id);
        if (res.data.id !== null) {
          this.urlList = res.data.picture.split(",");
        }
        this.formDate = res.data;
        // }
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  text-align-last: left;
  line-height: 24px;
}
::v-deep .leftTitel[data-v-16acf544] {
  margin-left: 80px;
  line-height: 24px;
  margin-top: 71px;
}
</style>
